<template>
  <el-dialog
    custom-class="bcp-dialog"
    append-to-body
    :close-on-click-modal="false"
    v-if="dialogVisible"
    title="选择上阶半成品（双击进行选择）"
    :visible.sync="dialogVisible"
    width="60%"
    top="5vh"
  >
    <avue-form ref="headerForm" :option="headerForm.option" v-model="headerForm.form" @submit="handleSubmit" @reset-change="handleReset">
      <template slot-scope="{ size }" slot="menuForm">
        <el-button type="primary" icon="el-icon-search" size="small" @click="$refs.headerForm.submit()">搜索</el-button>
        <el-button size="small" icon="el-icon-delete" @click="handleReset">清空</el-button>
      </template>
    </avue-form>
    <avue-crud
      ref="crud"
      :table-loading="loading"
      :data="data"
      :option="tableOption"
      :page.sync="page"
      @on-load="onLoad"
      @row-dblclick="rowDbclick"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
    >
    </avue-crud>
  </el-dialog>
</template>
<script>
import request from '@/router/axios';
import { getImoBySourceNo, getImoPageBySheetHeaderId } from '@/api/product/productrouteManage';
export default {
  name: 'partMasterModel',
  components: {},
  watch: {
    dialogVisible: function (val) {
      if (!val) {
        this.$emit('newKey', '');
        this.tableOption.option = '';
        this.query = {};
      }
    }
  },
  data() {
    const cpBcpDicData = [
      { label: 'BOM半成品', value: '1' },
      { label: '物料半成品', value: '3' }
    ];
    const gdBcpDicData = [
      { label: 'BOM半成品', value: '1' },
      { label: '用料清单', value: '2' },
      { label: '物料半成品', value: '3' }
    ];
    return {
      dialogVisible: false,
      cpBcpDicData: cpBcpDicData,
      gdBcpDicData: gdBcpDicData,
      headerForm: {
        option: {
          menuSpan: 6,
          menuPosition: 'right',
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: '半成品',
              labelWidth: 60,
              prop: 'bcp',
              span: 6,
              type: 'select',
              value: '1',
              dicData: this.gdBcpDicData,
              change: ({ value }) => {
                if (value) {
                  this.handleBcpChange(value);
                }
              }
            },
            {
              label: '产品编码',
              span: 6,
              prop: 'partNo'
            },
            {
              label: '产品名称',
              span: 6,
              prop: 'partName'
            }
          ]
        },
        form: {}
      },
      query: {}, // 外界传来的参数集合
      method: 'get',
      url: '/api/mes-admin/bom/page-bom-detail',
      tableOption: {
        height: 'calc(100vh - 480px)',
        calcHeight: 30,
        border: true, //表格外框线是否显示
        stripe: true, //表格是否显示条纹
        header: true, //表格头部是否显示
        index: true, //表格数据序号
        indexLabel: '序号',
        page: true, //表格分页是否显示
        addBtn: false, //新增按钮是否显示
        menu: false, //表格操作栏是否显示
        refreshBtn: false, //刷新按钮是否显示
        columnBtn: false, //控制表格列是否显示按钮是否显示
        searchMenuSpan: 6, //搜索按钮所占宽度
        searchMenuPosition: 'right', //搜索按钮位置
        column: [
          {
            label: '类别',
            prop: 'partCategoryName'
          },
          {
            label: '产品编码',
            prop: 'partNo'
          },
          {
            label: '产品名称',
            prop: 'partName'
          },
          {
            label: '产品型号',
            prop: 'partModel'
          },
          {
            label: '版本',
            prop: 'bomVersion'
          },
          {
            label: '仓库物料类型',
            prop: 'partType',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            dicUrl: '/api/blade-system/dict/dictionary?code=part_type'
          }
        ], //表格列配置
        selection: false, //表格是否多选
        reserveSelection: false, //表格是否分页多选
        rowKey: 'id',
        searchShow: true,
        isFilter: false, //是否对数据进行过滤
        query: {},

        filterOption: {
          //表格数据过滤
          isFilter: false,
          prop: '',
          data: [] //过滤的数据
        },
        selectOption: {
          data: [], //标记的数据
          prop: '', //对应列表的属性
          selectedData: []
        }
      }, //表格属性
      // 分页器配置
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      }, //表格分页
      selectedRows: [], //表格选中行数据
      data: [], //表格数据
      loading: false,
      filterOption: {},
      selectOption: {}
    };
  },
  computed: {
    // 是否工单工艺路线设计器
    isGdEditorPage() {
      if (this.$route.path.endsWith('pdesign') || this.$route.path.endsWith('pread')) {
        return false;
      } else if (this.$route.path.endsWith('gdesign') || this.$route.path.endsWith('gread')) {
        return true;
      }
    }
  },
  created() {},

  mounted() {
    this.headerForm.option.column[0].dicData = this.isGdEditorPage ? this.gdBcpDicData : this.cpBcpDicData;
  },

  methods: {
    showModal() {
      this.dialogVisible = true;
    },
    hideModal() {
      this.dialogVisible = false;
    },
    handleBcpChange(value) {
      this.headerForm.form.partNo = '';
      this.headerForm.form.partName = '';
      if (value == 1) {
        this.handleSelectBom();
      } else if (value == 2) {
        this.handleSelectImo();
      } else if (value == 3) {
        this.handleSelectMaterial();
      }
    },
    handleSubmit(form, done) {
      console.log('form', form);
      this.query = {};
      if (form.bcp == '1') {
        this.query.partNo = form.partNo;
        this.query.name = form.partName;
      } else if (form.bcp == '2') {
        this.query.partNo = form.partNo;
        this.query.partMasterName = form.partName;
        console.log('this.query', this.query);
      } else if (form.bcp == '3') {
        this.query.partNo = form.partNo;
        this.query.name = form.partName;
      }
      this.onLoad(this.page);
      done();
    },
    handleReset() {
      this.query = {};
      this.headerForm.form.partNo = '';
      this.headerForm.form.partName = '';
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      params = Object.assign(params, this.query, this.tableOption.query);
      console.log('params', params);
      this.loading = true;
      let tableParams = {
        current: page.currentPage,
        size: page.pageSize,
        ...params
      };
      request({
        url: this.url,
        method: this.method || 'get',
        params: tableParams
      })
        .then((res) => {
          const data = res.data.data;
          this.data = data.records;
          this.page.total = data.total;
          this.page.pageSize = data.size;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /**
     * 双击事件
     */
    rowDbclick(row) {
      row.tableType = this.headerForm.form.bcp;
      this.$emit('getSelectedRows', row);
      this.dialogVisible = false;
    },
    /**
     * 改变当前页
     */
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    /**
     * 改变当前页大小
     */
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    handleSelectBom() {
      this.url = '/api/mes-admin/bom/page-bom-detail';
      this.page.currentPage = 1;
      this.page.pageSize = 15;
      this.$set(this.tableOption, 'column', [
        {
          label: '类别',
          prop: 'partCategoryName',
          fixed: true
        },
        {
          label: '产品编码',
          prop: 'partNo'
        },
        {
          label: '产品名称',
          prop: 'partName'
        },
        {
          label: '产品型号',
          prop: 'partModel'
        },
        {
          label: '版本',
          prop: 'bomVersion',
          fixed: 'right'
        },
        {
          label: '仓库物料类型',
          prop: 'partType',
          fixed: 'right',
          props: {
            label: 'dictValue',
            value: 'dictKey'
          },
          dicUrl: '/api/blade-system/dict/dictionary?code=part_type'
        }
      ]);
      // this.$refs.crud.doLayout();
      this.onLoad(this.page);
    },

    handleSelectImo() {
      this.$set(this.tableOption, 'column', [
        {
          label: '类别',
          prop: 'partCategoryName',
          fixed: true
        },
        {
          label: '产品编码',
          prop: 'partNo'
        },
        {
          label: '产品名称',
          prop: 'partMasterName'
        },
        {
          label: '产品型号',
          prop: 'partMasterModel'
        },
        {
          label: '版本',
          prop: 'bomVersion',
          fixed: 'right'
        },
        {
          label: '仓库物料类型',
          prop: 'partType',
          fixed: 'right',
          props: {
            label: 'dictValue',
            value: 'dictKey'
          },
          dicUrl: '/api/blade-system/dict/dictionary?code=part_type'
        }
      ]);
      this.$refs.crud.doLayout();
      this.loading = true;
      getImoBySourceNo(this.$route.query.workOrderNo)
        .then((res) => {
          let data = res.data.data;
          if (data && data.id) {
            this.url = `/api/mes-warehouse/sheet-detail/page?partType=SEMIFINISHED&sheetHeaderId=${data.id}`;
            this.page.currentPage = 1;
            this.page.pageSize = 15;
            this.onLoad(this.page);
          } else {
            this.data = [];
            this.page.total = 0;
            this.page.currentPage = 1;
            this.page.pageSize = 15;
          }
        })
        .catch((err) => {})
        .finally(() => {
          this.loading = false;
        });
    },
    handleSelectMaterial() {
      this.url = '/api/mes-admin/part-master/page?partType=SEMIFINISHED';
      this.page.currentPage = 1;
      this.page.pageSize = 15;
      this.$set(this.tableOption, 'column', [
        {
          label: '类别',
          prop: 'categoryName',
          fixed: true
        },
        {
          label: '产品编码',
          prop: 'partNo'
        },
        {
          label: '产品名称',
          prop: 'name'
        },
        {
          label: '产品型号',
          prop: 'partModel'
        },
        {
          label: '版本',
          prop: 'bomVersion',
          fixed: 'right'
        },
        {
          label: '仓库物料类型',
          prop: 'partType',
          fixed: 'right',
          props: {
            label: 'dictValue',
            value: 'dictKey'
          },
          dicUrl: '/api/blade-system/dict/dictionary?code=part_type'
        }
      ]);
      this.$refs.crud.doLayout();
      this.onLoad(this.page);
    }
  }
};
</script>
<style lang="scss" scoped>
.el-form-item--small.el-form-item {
  margin-bottom: 0;
}
.common-modal-sub-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  margin: -10px 0;
}
.table-title {
  font-size: 16px;
  font-weight: bold;
  .mr10 {
    margin-right: 10px;
  }
}
::v-deep .bcp-dialog {
  .avue-crud__menu {
    display: none;
  }
}
</style>
